{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}我的项目{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css' %}">
    <style>
        .project {
            margin-top: 10px;
        }

        .panel-success .panel-heading {
            padding: 5px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

        }

        /* panel-body  flex布局。 */
        .panel-body {
            padding: 0;
            display: flex; /* flex布局 */
            flex-direction: row; /* 按行排列 */
            justify-content: left; /* 从左边开始排列 */
            align-items: flex-start; /* 垂直方式 从上到下；默认值 */
            flex-wrap: wrap; /* 允许子元素换行 */
        }

        /* panel-body 的子元素 item */
        .panel-body > .item {
            border-radius: 6px;
            width: 180px;
            border: 1px solid #dddddd;
            margin: 20px 10px;

        }

        .panel-body > .item:hover {
            border: 1px solid #f0ad4e;
        }

        .panel-body > .item > .title {
            height: 90px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            font-size: 15px;
            text-decoration: none;
        }

        .panel-body > .item > .info {
            padding: 10px 10px;

            display: flex;
            justify-content: space-between;

            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;

        }

        .panel-body > .item > .info a {
            text-decoration: none;
        }

        .panel-body > .item > .info .fa-star {
            font-size: 18px;

        }

        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }

        th {
            text-align: center;
        }

        td {
            text-align: center;
        }

        .flex-container {
            display: flex;
            flex-wrap: wrap; /* 如果需要换行，可以启用这个属性 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 均匀分布元素之间的空间 */
        }

        .flex-item {
            /* 你可能不需要为flex-item设置特定的样式，这取决于你的具体需求 */
            /* 例如，如果你想要标签和输入框之间有更多空间，你可以给flex-item添加margin */
            margin-right: 5px; /* 右侧间距 */
        }

        /* 如果你不想让最后一个元素（按钮）也有右侧间距，可以添加一个特定的类来覆盖它 */
        .flex-container .btn-xs {
            margin-right: 0;
        }

        /*
        注意：由于使用了flex-wrap: wrap; 和 justify-content: space-between;
        如果容器宽度不足以容纳所有元素，它们将自动换行，并且每行的元素将均匀分布。
        如果你希望它们始终在同一行上，请确保容器宽度足够大，或者移除flex-wrap属性。
        */

        #id_big_project {
            width: 20px;
            height: 20px;
        }


    </style>
{% endblock %}

{% block content %}
    <!-- 搜索 -->
    <div class="container-fluid project">
        <form method="get" class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-search-plus" aria-hidden="true"></i>
                    </div>
                    <input type="text" class="form-control" id="searchInput" placeholder="输入客户名称关键字">
                    <div class="input-group-addon">
                        <select id="resultsSelect" disabled></select>
                    </div>
                </div>
            </div>
            <button id='btnAdd' type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true">新建项目</span>
            </button>
        </form>
    </div>

    <!-- keyup事件 -->
    <!--
    <div class="container-fluid project">
        <form method="get">
            <div>
                <label for="newSearch">新Search:</label>
                <input type="text" id="newSearch" placeholder="输入客户名称关键字">
                <select name="" id="newSelect"></select>
                <button type="button" id="newSearchBtn">新Search提交</button>
            </div>
        </form>
    </div>
    -->
    <!-- 进行中的 -->
    <div class="container-fluid project">
        <div class="panel panel-info">
            <div class="panel-heading"><i class="fa fa-list" aria-hidden="true"> 进行中的项目</i></div>
            <div class="panel-body">
                {% for item in category.ongoing %}
                    <div class="item">
                        <a href="{% url 'project_view' p_id=item.id %}" class="title"
                           style="background-color: {{ item.get_color_display }}">{{ item.customer }}</a>
                        <div class="info">
                            <span style="font-weight: bold">{{ item.software }}</span>
                            <span>{{ item.SR_No }}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- 已完成的 -->
    <div class="container-fluid ">
        <div class="panel panel-success">
            <div class="panel-heading">
                <div>
                    <i class="fa fa-list" aria-hidden="true"> 已完成的项目: 30天</i>
                </div>


                <!-- class="form-inline flex-container" 定义类  -->
                <form method="get" class="form-inline flex-container">
                    <div class="form-group">
                        <label for="start_d" class="flex-item">开始日期:</label>
                        <input type="date" id="start_d" name="start_d" class="form-control flex-item"
                               style="height: 22px;" value="{{ s_date }}">
                    </div>
                    <div class="form-group">
                        <label for="end_d" class="flex-item">结束日期:</label>
                        {#                                <p>Debug: {{ end_date }}</p>#}
                        <input type="date" id="end_d" name="end_d" class="form-control flex-item"
                               style="height: 22px;" value="{{ e_date }}">
                    </div>
                    <div class="form-group">
                        <label for="p_name" class="flex-item">关键字:</label>
                        <input type="text" id='p_name' name="p_name" class="form-control flex-item"
                               placeholder="项目名称(客户名称)关键字"
                               value="{{ search_date }}" style="height: 22px;">
                    </div>
                    <button class="btn btn-primary btn-xs flex-item" type="submit">
                        <i class="fa fa-search" aria-hidden="true"> 搜索</i>
                    </button>
                    <button onclick='clearSearch()' class="btn btn-primary btn-xs flex-item" type="button"
                            style="margin-left: 3px">
                        <i class="fa fa-undo" aria-hidden="true"> 重置</i>
                    </button>
                </form>

            </div>
            <div class="panel-body">
                <table class="table table-hover table-condensed">
                    <thead>
                    <tr style="color: #2aabd2">
                        <th>SR No#</th>
                        <th>客户&项目</th>
                        <th>Owner</th>
                        <th>分类</th>
                        <th>软件</th>
                        <th>版本</th>
                        <th>服务器</th>
                        <th>MFD</th>
                        <th>打印机数量</th>
                        <th>大项目</th>
                        <th>金额</th>
                        <th>开始日期</th>
                        <th>结束日期</th>

                    </tr>
                    </thead>
                    <tbody>
                    {#    {% for obj in category.Done %}#}
                    {% for obj in queryset %}
                        <tr>
                            <td>{{ obj.SR_No }}</td>
                            <td>
                                <a href="{% url 'project_view' p_id=obj.id %}">{{ obj.customer }}</a>
                            </td>
                            <td>{{ obj.sa }}</td>
                            <td>{{ obj.get_category_display }}</td>
                            <td>{{ obj.get_software_display }}</td>
                            <td>{{ obj.version }}</td>
                            <td>{{ obj.server_num }}</td>
                            <td>{{ obj.mfd_num }}</td>
                            <td>{{ obj.printer_num }}</td>
                            <td>{{ obj.big_project }}</td>
                            <td>{{ obj.value }}</td>
                            <td>{{ obj.end_date }}</td>
                            <td>{{ obj.end_date }}</td>

                        </tr>

                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>


    </div>

    <!-- 页码 -->
    <div class="container-fluid ">
        <div class="row">
            <div class="col-md-8">
                <ul class="pagination">
                    {{ page_string }}
                </ul>
            </div>
            <div class="col-md-4" style="text-align: right; color: #2aabd2; font-size: 16px; line-height: 75px">
                Total：{{ count }}
            </div>
        </div>
    </div>

    <!-- Modal 增加项目-->
    <div class="modal fade" id="addProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div class="alert alert-info fade in" role="alert">
                        <h3 id="alert_info">占位字符</h3>
                        <p style="margin: 10px 0;">请确认选择客户是否正确！！！</p>
                    </div>
                </div>
                <div class="modal-body">
                    <form id="form1" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            {% if field.name == 'desc' %}
                                <div class="row">
                                    <div class="form-group" style="margin-left: 10px; margin-right: 10px">
                                        <div class="col-md-12" style="position: relative; margin-bottom: 20px">
                                            <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                            <div class="row clearfix">
                                                <div id="editor-textarea" class="col-md-12">
                                                    {{ field }}
                                                    <!--
                                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                                    -->
                                                    <span class="error-msg"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    <div class="col-md-3" style="position: relative; margin-bottom: 15px">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                                        {{ field }}
                                        <span class="error-msg"></span>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script>
        // 测试键盘事件
        var newSearch = document.getElementById('newSearch');
        var newSelect = document.getElementById('newSelect');
        // keyup事件  拷贝、粘贴不会反应
        newSearch.onkeyup = function (e) {
            var input = e.target.value;
            if (input.length >= 2) {
                // console.log(e.target.value);
                // console.log(input);
                $.ajax({
                    url: {% url 'search' %},
                    type: 'get',
                    data: {'query': input},
                    success: function (data) {
                        // 先清空下拉列表
                        newSelect.innerHTML = '';
                        if (data.status) {
                            console.log(data.datalist);
                            let new_list = data.datalist;
                            for (let i = 0; i < new_list.length; i++) {
                                let item = new_list[i];
                                console.log(item.id + '... ' + item.name);
                                let option = document.createElement('option')
                                // 对于选择框（如<select>），value属性表示用户选择的选项的值。
                                option.value = item.id;
                                option.textContent = item.name;
                                newSelect.appendChild(option);
                            }
                        }
                    }
                })
            } else {
                // 如果输入长度小于2，清空下拉列表
                newSelect.innerHTML = '';
            }
        }


        // 清理完成项目的搜索框
        function clearSearch() {
            $('#start_d').val('');
            $('#end_d').val('');
            $('#p_name').val('');
        }

        // 全局变量 选中的客户信息 的id
        var C_ID;

        $(function () {
            // on 事件 选择实时查询事件
            bindSearchEvent();
            // change 事件 获得实时查询结果
            bindSearchValue();
            // 添加项目事件，打开模态框
            bindBtnAddProject();
            // 增加项目模态框保存提交
            bindBtnSaveProject();
            // 大项目选择
            bindSelectBigProject();
        })

        // 实时查询 on->input
        function bindSearchEvent() {
            $('#searchInput').on('input', function () {
                var inputValue = $(this).val();
                // 当输入长度达到某个阈值时开始查询，例如4个字符
                if (inputValue.length >= 2) {
                    $.ajax({
                        url: '{% url 'search' %}',
                        type: 'get',
                        data: {'query': inputValue},
                        success: function (res) {
                            if (res.status) {
                                // 清空select，移出 disabled
                                $('#resultsSelect').empty().prop('disabled', false);
                                console.log(res.datalist);
                                $.each(res.datalist, function (index, item) {
                                    console.log(index + '...' + item.id + '....' + item.name);
                                    $('#resultsSelect').append($('<option>', {
                                        value: item.id,
                                        text: item.name,
                                    }));
                                    // 在 HTML 的 <select> 元素中，
                                    // 如果只有一个 <option> 或者当前选中的 <option> 已经是唯一存在的 <option>，
                                    // 那么从用户交互的角度来看，没有发生“改变”的行为，因此 change 事件不会被触发。
                                    // trigger 方法 强制触发 change 方法
                                    if ($('#resultsSelect option').length >= 1) {
                                        $('#resultsSelect').val(item.id).trigger('change');
                                    }
                                })
                            } else {
                                // 如果没有结果，再次禁用select元素（可选）
                                $('#resultsSelect').prop('disabled', true);
                            }
                        }
                    })
                } else {
                    $('#resultsSelect').empty(); // 如果没有输入，也清空select
                }
            })
        }

        // change 事件实时查询的结果
        function bindSearchValue() {
            $('#resultsSelect').change(function () {
                console.log('调试语句,检查 change 是否执行');  // 调试语句
                C_ID = $(this).val();
                console.log("当前选中值是：" + C_ID);
            })
        }

        // 新增项目打开模态框
        function bindBtnAddProject() {
            $('#btnAdd').click(function () {
                $.ajax({
                    url: '{% url 'search_data' %}',
                    type: 'get',
                    data: {'customer_id': C_ID},
                    datatype: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            $('#alert_info').text('正在对客户： ' + res.obj + ' ； 创建新的工作记录');
                            $('#form1')[0].reset();
                            $('.error-msg').empty();
                            $('#id_value').prop('readonly', true);
                            $('#addProjectModal').modal('show');
                        } else {
                            alert(res.error);
                        }
                    },
                })
            })
        }

        // 大项目选择
        function bindSelectBigProject() {
            let getBigProject = document.getElementById('id_big_project');
            let getValue = document.getElementById('id_value');
            getBigProject.onchange = function () {
                if(getBigProject.checked){
                    getValue.removeAttribute('readOnly');
                }else{
                    getValue.value = 0;
                    getValue.setAttribute('readOnly', true);
                }
            }
        }

        // 增加项目模态框保存提交
        function bindBtnSaveProject() {
            $('#btnSubmit').click(function () {
                // 因为要对选中的客户创建project，客户的id在form1表单外
                // 如果直接使用 data: $('#form1').serialize(), 没有包含 选中客户的id
                // 这里使用 new FormData 来额外增加 客户id
                var formData = new FormData($('#form1')[0]); // 注意这里传入的是 DOM 元素，不是 jQuery 对象
                formData.append('customer_id', C_ID); // 添加额外的数据
                $.ajax({
                    url: '{% url 'customer_add_project' %}',
                    type: 'post',
                    data: formData,
                    processData: false,  // 告诉jQuery不要处理发送的数据（因为FormData对象不需要）
                    contentType: false,  // 告诉jQuery不要设置内容类型头（浏览器会自动设置正确的头）
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            alert(res.info);
                            $('#addProjectModal').modal('hide');
                            location.reload();
                        } else {
                            console.log(res.error);
                            $.each(res.error, function (key, value) {
                                console.log(key + '......' + value);
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })

            })

        }


    </script>

{% endblock %}